<template>
  <div class="Mine">
    <div class="userInfo">
      学号:{{userInfo.studentId}}&nbsp;&nbsp;系别:{{deptObj[userInfo.type]}}&nbsp;&nbsp;学生名称:{{userInfo.name}}
    </div>
    <table>
      <thead>
        <tr>
          <th>课程ID</th>
          <th>学科名</th>
          <th>课程名</th>
          <th>课时长度</th>
          <th>状态</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in userInfo.subjects" :key="index">
          <td>{{item.id}}</td>
          <td>{{ deptObj[item.type] }}</td>
          <td>{{item.name}}</td>
          <td>{{item.lessons}}</td>
          <td>已选</td>
        </tr>
        <tr v-show="userInfo.subjects.length==0">
          <td colspan="5"> 暂未选课 </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    name:'',
    components: {

    },
    props: {

    },
    data() {
        return {
          deptObj:{},   // 学科名关系对应对象
        };
    },
    computed: {
      ...mapState({
        userInfo: state => state.user.userInfo,
        dept: state => state.subjects.dept,
      })
    },
    created() {
      // 创建学科名关系对应对象
      let deptObj = {}
      this.dept.forEach(item => {
         deptObj[item.id] = item.name
      })
      this.deptObj = deptObj
    },
    methods: {

    }
};
</script>

<style scoped lang="less">
  .Mine {
    margin: 0 auto;
    width: 1000px;
    text-align: center;
  }

  .userInfo{
    text-align: left;
    margin-bottom: 10px;
  }

  table {
    width: 100%;
    border: 1px solid black;
    border-collapse: collapse;
    color: #666;
    font-size: 14px;
  }

  table th {
    width: 100px;
    border: 1px solid black;
  }

  table tr {
    height: 70px;
  }

  table td {
    padding-left: 10px;
    border: 1px solid black;
  }

</style>

